<!DOCTYPE html>
<html layout:decorate="~{layout}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:th="http://www.w3.org/1999/html">

<head>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
    <title th:text="#{cas.mfa.providerselection.pagetitle}">Composite MFA Provider Selection</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3" role="main">
    <div class="mdc-card mdc-card-content w-lg-66 p-4 m-auto" layout:fragment="content">
        <h2 class="card-title">Multifactor Authentication Provider Selection</h2>
        <hr>
        <div class="card-text">
            <div class="border-bottom py-4" th:each="provider: ${mfaSelectableProviders}">
                <form method="post" name="fm1" th:action="@{/login}">
                    <h4 class="d-flex align-items-center">
                        <i class="mdi mdi-laptop mr-2"></i>
                        <span th:utext="#{'cas.mfa.providerselection.' + ${provider}}">Provider name goes
                                here</span>
                    </h4>
                    <p th:utext="#{'cas.mfa.providerselection.' + ${provider} + '.notes'}">Provider description goes
                        here</p>
                    <button class="mdc-button mdc-button--raised" value="Use">
                        <span class="mdc-button__label" th:text="Use">Use</span>
                    </button>
                    <input name="execution" th:value="${flowExecutionKey}" type="hidden"/>
                    <input name="mfaProvider" th:value="${provider}" type="hidden"/>
                    <input name="_eventId" type="hidden" value="submit"/>
                </form>
            </div>
            <a class="mdc-button mdc-button--outlined mt-4" id="cancel" name="cancel"
               onclick="location.href = location.href;">
                <span class="mdc-button__label" th:text="Cancel">Cancel</span>
            </a>
        </div>
    </div>
</main>
</body>

</html>